<template>
<div>
    <el-form :label-position="labelPosition" :rules="rules" ref="formObject" label-width="100px" :model="formObject" :status-icon="true" :hide-required-asterisk="true">
        <el-form-item label="昵称：" prop="nickName">
            <el-input v-model="formObject.userNickName"></el-input>
        </el-form-item>
        <el-form-item label="个人简介：" prop="description">
            <el-input 
            type="textarea" 
            v-model="formObject.description"
            resize="none"
            maxlength="200"
            show-word-limit
            rows="4"
            ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('formObject')">提交修改</el-button>
            <el-button @click="resetForm('formObject')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import {request} from '@/network/request.js';
export default {
    name:"profileChange",
    props:{
        orgUserInfo:{
            type:Object,
            required:true
        }
    },
    data(){
        return {
            labelPosition: 'right',
            formObject:{
                userNickName:"",
                description:""
            },
            rules:{
                userNickName:[
                    { required: true, message: '昵称不能为空哦', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                description:[
                    { required: true, message: '个人简介不能为空哦', trigger: 'blur' },
                    { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
                ]
            },
        }
    },
    methods:{
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                //表单验证成功并提交
                console.log("表单提交了"+this.formObject);
                request({
                    url:"/user/changeUserInfo",
                    method:"post",
                    data:{
                        userId:this.$store.getters.getCurrentUser.userId,
                        userNickName:this.formObject.userNickName,
                        description:this.formObject.description
                    }
                }).then(res=>{
                    console.log(res);
                    this.$message({
                        message: '修改成功> <',
                        type: 'success'
                        });
                }).catch(err=>{
                    console.log(err);
                    this.$message.error('修改失败，请稍后再试');
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
        this.$refs[formName].resetFields();
        }
    },
    created(){
        this.formObject.userNickName=this.orgUserInfo.userNickName;
        this.formObject.description=this.orgUserInfo.description;
    },
    mounted(){
    },
    beforeDestroy(){
    }
}
</script>

<style>

</style>